<template>
  <div class="table-child">
    <Table row-key="id" :columns="columns" :data="data" border>
      <template slot-scope="{ row }" slot="name">
         {{ row.meta.title }}
      </template>
      <template slot-scope="{ row }" slot="icon">
         {{ row.meta.icon }}
      </template>
    </Table>
    <div class="pageArea">
      <Page :total="total" show-sizer @on-change="handleChange" @on-page-size-change="handlePageSizeChange" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    columns: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data () {
    return {
      data: this.tableData,
      columns16: [
        {
          title: 'Name',
          key: 'name',
          tree: true
        },
        {
          title: 'Age',
          key: 'age'
        },
        {
          title: 'Address',
          key: 'address'
        }
      ],
      data12: [
        {
          id: '100',
          name: 'John Brown',
          age: 18,
          address: 'New York No. 1 Lake Park'
        },
        {
          id: '101',
          name: 'Jim Green',
          age: 24,
          address: 'London No. 1 Lake Park',
          children: [
            {
              id: '10100',
              name: 'John Brown',
              age: 18,
              address: 'New York No. 1 Lake Park'
            },
            {
              id: '10101',
              name: 'Joe Blackn',
              age: 30,
              address: 'Sydney No. 1 Lake Park'
            },
            {
              id: '10102',
              name: 'Jon Snow',
              age: 26,
              address: 'Ottawa No. 2 Lake Park',
              children: [
                {
                  id: '1010200',
                  name: 'Jim Green',
                  age: 24,
                  address: 'New York No. 1 Lake Park'
                }
              ]
            }
          ]
        },
        {
          id: '102',
          name: 'Joe Black',
          age: 30,
          address: 'Sydney No. 1 Lake Park'
        },
        {
          id: '103',
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park'
        }
      ]
    };
  },
  watch: {
    // 当父组件该数据发生变化，子组件需要监听其变化重新赋值
    tableData: {
      handler(newVal, oldVal) {
        this.data = newVal;
        this.loading = false;
      },
      deep: true,
      immediate: true
    },
    total: {
      handler(newVal, oldVal) {
        this.total = newVal;
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleChange(page) {
      this.$emit('handle-change', page);
    },
    handlePageSizeChange(pageSize) {
      this.$emit('handle-page-size-change', pageSize);
    }
  }
};
</script>

<style lang="scss" scoped>
.table-child{
  margin: 0 0.2rem;
  border: 1px solid #e8eaec;
}
.pageArea{
  margin: 1.25rem 0;
  text-align: right;
}
</style>
